<template>
  <el-drawer
    v-model="drawerVisible"
    title="项目文档"
    direction="rtl"
    size="30%"
    @close="handleClose"
  >
    <div class="documentation-container">
      <div class="markdown-content" v-html="renderedMarkdown"></div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
// @ts-ignore
import { marked } from 'marked'

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

const drawerVisible = ref(false)
const markdownContent = ref('')
const renderedMarkdown = ref('')

// 监听 visible 属性变化
watch(
  () => props.visible,
  async (newVal) => {
    drawerVisible.value = newVal
    if (newVal) {
      await loadDocumentation()
    }
  }
)

// 加载文档内容
const loadDocumentation = async () => {
  try {
    const response = await fetch('/README.md')
    markdownContent.value = await response.text()
    renderedMarkdown.value = marked.parse(markdownContent.value)
  } catch (error) {
    console.error('Failed to load README.md:', error)
    markdownContent.value = '# 项目文档加载失败\n\n请稍后重试或联系管理员。'
    renderedMarkdown.value = marked.parse(markdownContent.value)
  }
}

// 关闭抽屉
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.documentation-container {
  padding: 20px;
  height: 100%;
  overflow: auto;
}

.markdown-content {
  line-height: 1.6;
}

.markdown-content :deep(h1) {
  font-size: 2em;
  margin: 0.67em 0;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-content :deep(h2) {
  font-size: 1.5em;
  margin: 0.83em 0;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-content :deep(h3) {
  font-size: 1.25em;
  margin: 1em 0;
}

.markdown-content :deep(h4) {
  font-size: 1em;
  margin: 1.33em 0;
}

.markdown-content :deep(p) {
  margin: 1em 0;
}

.markdown-content :deep(ul),
.markdown-content :deep(ol) {
  padding-left: 2em;
  margin: 1em 0;
}

.markdown-content :deep(li) {
  margin: 0.5em 0;
}

.markdown-content :deep(pre) {
  background-color: #f6f8fa;
  padding: 16px;
  overflow: auto;
  border-radius: 6px;
}

.markdown-content :deep(code) {
  background-color: rgba(27, 31, 35, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

.markdown-content :deep(blockquote) {
  margin: 0;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}
</style>